<template>
  <div class="app-container study-container">
    <el-row :gutter="20">
      <!-- 欢迎卡片 -->
      <el-col :span="24">
        <el-card class="welcome-card" shadow="hover">
          <div class="welcome-content">
            <h2>欢迎来到基础学习模块</h2>
            <p class="sub-title">在这里，您将开启直升机知识的学习之旅</p>
          </div>
        </el-card>
      </el-col>

      <!-- 学习模块卡片 -->
      <el-col :xs="24" :sm="12" :md="8" v-for="(item, index) in learningModules" :key="index">
        <el-card class="module-card" shadow="hover">
          <div class="module-header">
            <i :class="item.icon"></i>
            <h3>{{ item.title }}</h3>
          </div>
          <div class="module-content">
            <p>{{ item.description }}</p>
          </div>
          <div class="module-footer">
            <el-tag size="small" :type="item.status === '已开放' ? 'success' : 'info'">
              {{ item.status }}
            </el-tag>
            <el-button type="text" @click="handleModuleClick(item)">
              {{ item.status === '已开放' ? '开始学习' : '敬请期待' }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'StudyIndex',
  data() {
    return {
      learningModules: [
        {
          title: '直升机基本原理',
          description: '了解直升机的基本工作原理、主要部件及其功能，建立对直升机系统的整体认识。',
          icon: 'el-icon-s-platform',
          status: '已开放'
        },
        {
          title: '飞行力学基础',
          description: '学习直升机飞行的基本力学原理，包括升力、推力、重力和阻力等概念。',
          icon: 'el-icon-s-opportunity',
          status: '开发中'
        },
        {
          title: '安全操作规范',
          description: '掌握直升机操作的安全规范和注意事项，确保飞行安全。',
          icon: 'el-icon-s-check',
          status: '开发中'
        },
        {
          title: '气象知识',
          description: '了解影响直升机飞行的气象因素，学习气象数据的解读和应用。',
          icon: 'el-icon-sunny',
          status: '开发中'
        },
        {
          title: '导航技术',
          description: '学习直升机导航的基本原理和方法，掌握定位和航线规划技能。',
          icon: 'el-icon-location-information',
          status: '开发中'
        },
        {
          title: '应急处置',
          description: '学习各类紧急情况的处置方法，提高应急反应能力。',
          icon: 'el-icon-warning',
          status: '开发中'
        }
      ]
    }
  },
  methods: {
    handleModuleClick(module) {
      if (module.status === '已开放') {
        this.$message({
          message: '正在开发相关内容，敬请期待',
          type: 'info'
        })
      } else {
        this.$message({
          message: '该模块正在开发中，敬请期待',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.study-container {
  padding: 20px;
  background-color: #f5f7fa;

  .welcome-card {
    margin-bottom: 30px;
    border-radius: 8px;
    
    .welcome-content {
      text-align: center;
      padding: 30px 0;

      h2 {
        font-size: 28px;
        color: #303133;
        margin-bottom: 15px;
      }

      .sub-title {
        font-size: 16px;
        color: #909399;
      }
    }
  }

  .module-card {
    height: 100%;
    margin-bottom: 20px;
    border-radius: 8px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }

    .module-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      i {
        font-size: 24px;
        color: #409EFF;
        margin-right: 10px;
      }

      h3 {
        margin: 0;
        font-size: 18px;
        color: #303133;
      }
    }

    .module-content {
      min-height: 80px;
      
      p {
        color: #606266;
        line-height: 1.6;
        margin: 0;
      }
    }

    .module-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      padding-top: 15px;
      border-top: 1px solid #EBEEF5;

      .el-tag {
        padding: 0 10px;
      }

      .el-button {
        padding: 0;
        font-size: 14px;
      }
    }
  }
}
</style> 